
<% content_for :title, t("assignments.show.title", name: @assignment.name) %>

<div class="container">
  <% if notice %>
  <div class="row" id='alertdiv'>
    <div class="alert alert-success alert-dismissible container text-center">
      <a href="#" class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
      <h6><%= notice %></h6>
    </div>
  </div>
  <% end %>
  <div class="row center-row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
      <h1 class="submain-heading"><%= t("assignments.show.assignment_details_heading") %></h1>
    </div>
  </div>
  <div class="assignments-container">
    <div class="row center-row">
      <div class="col-12 col-sm-12 col-md-12 col-lg-12">
        <div class="assignments-data">
          <p><%= t("assignments.assignment_data.name_html", name: @assignment.name) %></p>
          <p><%= t("assignments.assignment_data.group_html", group_name: @assignment.group.name) %></p>
          <p><strong><%= t("assignments.deadline") %>&nbsp;</strong><span class="assignments-deadline" data-year=<%= deadline_year(@assignment) %>
            data-month=<%= deadline_month(@assignment) %> data-day=<%= deadline_day(@assignment) %>
            data-hour=<%= deadline_hour(@assignment) %> data-minute=<%= deadline_minute(@assignment) %>
            data-second=<%= deadline_second(@assignment) %>><%= @assignment.deadline %></span></p>
          <% if(@assignment.deadline > Time.now) %>
            <p><%= t("assignments.assignment_data.time_remaining_html", time_remaining: AssignmentDecorator.new(@assignment).time_remaining) %></p>
          <% end %>
          <p><%= t("assignments.assignment_data.graded_html", graded: @assignment.graded) %></p>
          <% if @assignment.description %>
            <p><strong><%= t("assignments.assignment_data.description") %> </strong></p>
            <div class="assignments-description">
              <%= @assignment.description&.html_safe %>
            </div>
          <% end %>
          <% if @assignment.restricted_circuit_elements != "None" %>
            <p><%= t("assignments.assignment_data.restricted_elements_html", restricted_circuit_elements: @assignment.restricted_circuit_elements) %></p>
          <% end %>
          <% if @assignment.restricted_features != "None" %>
          <p><%= t("assignments.assignment_data.restricted_features_html", restricted_features: @assignment.restricted_features) %></p>
        <% end %>
          <% if policy(@assignment).admin_access? && @assignment.status!="closed" %>
            <br>
            <%= link_to edit_group_assignment_path(@group, @assignment), class: "mini-button groups-reopen-mini-button" do %>
              <%= image_tag("svgs/editGroup.svg", alt: "Edit Assignment") %>
              <span><%= t("edit") %></span>
            <% end %>
          <% end %>
          <% if policy(@assignment).can_be_graded? %>
            &nbsp;
            <%= link_to t("assignments.assignment_data.export_grades"), grades_to_csv_path(@assignment, format: "csv"), class: "btn primary-button" %>
          <% end %>
          &nbsp;
          <%= link_to t("back"), group_path(@group), class: "anchor-text" %>
          <br> <br>
          <hr class="assignments-horizontal-rule">
          <% if policy(@assignment).mentor_access? %>
          <h3 class="assignments-submission-heading"><%= t("assignments.assignment_data.submissions") %></h3>
            <script>
              $( function() {
                $('.list-group-item-action').on('click', function (e) {
                  e.preventDefault()
                  $("#assignmentPreview").attr("src","/simulator/" + e.currentTarget.id );
                  $(this).tab('show')
                  $('#project-description').html($(e.currentTarget).attr('data-description'));
                  var cssLink = document.createElement("link");
                  cssLink.href = '/css/embed.css';
                  cssLink.rel = 'stylesheet';
                  cssLink.type ='text/css';
                  frames['assignmentPreview'].document.head.appendChild(cssLink);
                })
              });
            </script>
            <% if @assignment.project_order.blank? %>
              <div class="assignments-no-submission">
                <h5><%= t("assignments.assignment_data.no_submissions") %></h5>
              </div>
            <% else %>
              <div class="assignments-submission">
                <div class="row assignments-submission-row">
                  <div class="col-12 col-sm-12 col-md-3 col-lg-3 assignments-submission-col-3">
                    <div id="list-tab" role="tablist">
                      <ul class="list-group assignments-list-group">
                        <% @assignment.project_order.each do |project| %>
                          <li><a class="list-group-item list-group-item-action assignments-list-item assignments-username-truncate" id="<%= project.id %>" data-grade="<%= project.grade_str %>" data-remarks="<%= project.remarks_str %>" data-description="<%= project.description %>"><%= project.author.name %></a></li>
                        <% end %>
                      </ul>
                    </div>
                  </div>
                  <div class="col-12 col-sm-12 col-md-9 col-lg-9 assignments-iframe">
                    <div class="ratio ratio-4x3 ">
                      <iframe src="" name="assignmentPreview" id="assignmentPreview" scrolling="no" webkitAllowFullScreen mozAllowFullScreen allowFullScreen> </iframe>
                    </div>
                  </div>
                </div>
                <div class="row assignments-submission-row assignments-submission-description assignments-description">
                  <h6 class="assignments-project-decription-heading"><%= t("assignments.assignment_data.description") %></h6>
                  <p id="project-description"></p>
                </div>
              </div>

              <% if policy(@assignment).can_be_graded? %>
                <div class="assignments-grading-container">
                  <h5 class="assignments-grading-heading"><%= t("assignments.assignment_data.grades_and_remarks") %></h5>
                  <span id="project-grade-error" class="assignments-error"></span>
                  <%= form_with(model: Grade.new, multipart: true, id: "assignment-grade-form", url: "/grades") do |form| %>
                    <%= form.hidden_field :project_id, id: "assignment-project-id" %>
                    <%= form.hidden_field :assignment_id, value: @assignment.id %>
                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                        <h6><%= t("assignments.assignment_data.grade") %></h6>
                        <% if @assignment.grading_scale == "percent" %>
                          <%= form.number_field :grade, id: "assignment-grade-grade", min: 0, max: 100, class: "form-control form-input" %>
                        <% elsif @assignment.grading_scale == "letter" || @assignment.grading_scale == "custom" %>
                          <%= form.text_field :grade, id: "assignment-grade-grade", class: "form-control form-input" %>
                        <% end %>
                      </div>
                      <div class="col-12 col-sm-12 col-md-8 col-lg-8">
                        <h6><%= t("assignments.assignment_data.remarks") %></h6>
                        <%= form.text_field :remarks, id: "assignment-grade-remarks", class: "form-control form-input" %>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                        <button name="button" type="submit" id="grade-form-submit" class="btn primary-button mt-4"><%= t("submit") %></button>
                        &nbsp; &nbsp;
                      </div>
                      <div class="col-12 col-sm-12 col-md-8 col-lg-8 assignments-grading-help">
                        <% if @assignment.grading_scale == "percent" %>
                          <small><%= t("assignments.assignment_data.grading_scale_percent") %></small>
                        <% elsif @assignment.grading_scale == "letter" || @assignment.grading_scale == "custom" %>
                          <small><%= t("assignments.assignment_data.grading_scale_letter") %></small>
                        <% end %>
                      </div>
                    </div>
                  <% end %>
                </div>
                <div class="assignments-grading-container">
                  <div class="row">
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <h6><%= t("assignments.assignment_data.grade") %></h6>
                      <span id="project-grade"></span>
                      <br>
                      <div class="assignments-grade-horizontal-rule"></div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-8 col-lg-8">
                      <h6><%= t("assignments.assignment_data.remarks") %></h6>
                      <span id="project-remarks"></span>
                      <br>
                    </div>
                  </div>
                  <div class="row">
                    <%= button_tag t("assignments.assignment_data.remove"), id: "grade-form-remove", class: "btn ml-3 primary-delete-button" %>
                  </div>
                </div>
              <% end %>
            <% end %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="/js/grading.js"> </script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.assignments-deadline').each(function(){
      let month = $('.assignments-deadline').data("month") -1;
      let date = new Date($('.assignments-deadline').data("year"), month, $('.assignments-deadline').data("day"), $('.assignments-deadline').data("hour"), $('.assignments-deadline').data("minute"), $('.assignments-deadline').data("second"), 0);
      let offset = date.getTimezoneOffset();
      let localTime = new Date(date.getTime() - offset * 60 * 1000);
      this.innerHTML = localTime;
    });
  });
</script>
